<template>
  <el-drawer v-model="addDrawer" size="48%" :show-close="false" @opened="openDrawer"
    @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{typeName}}</span></h2>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="160px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省">
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县">
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="观测点编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入观测点编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="工程编号" prop="projectId">
            <el-input v-model="form.projectId" placeholder="请输入工程编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测点野外编号" prop="fieldId" style="width: 100%">
            <el-input v-model="form.fieldId" placeholder="请输入观测点野外编号" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="40" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测点地名" prop="locationName" style="width: 100%">
            <el-input v-model="form.locationName" placeholder="请输入观测点地名" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="40" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测日期" prop="svyDate">
            <el-input v-model="form.svyDate" placeholder="请输入观测日期" clearable maxlength="8" />
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测目的" prop="purpose" style="width: 100%">
            <el-input v-model="form.purpose" placeholder="请输入观测目的" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea"
              show-word-limit maxlength="255" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测点描述" prop="spCommentInfo" style="width: 100%">
            <el-input v-model="form.spCommentInfo" placeholder="请输入观测点描述" :autosize="{ minRows: 8, maxRows: 16 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="经度" prop="lon">
            <el-input v-model="form.lon" placeholder="请输入经度" clearable maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="form.lat" placeholder="请输入纬度" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="海拔高度 [米]" prop="elevation">
            <el-input v-model.number="form.elevation" placeholder="请输入海拔高度 [米]" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="观测方法" prop="svyMethods" style="width:100%">
            <el-input v-model="form.svyMethods" placeholder="请输入观测方法" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea" show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采集样品总数" prop="collectedSampleCount">
            <el-input v-model="form.collectedSampleCount" placeholder="请输入采集样品总数" clearable maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="送样总数" prop="sampleCount">
            <el-input v-model="form.sampleCount" placeholder="请输入送样总数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="获得测试结果样品数" prop="datingSampleCount">
            <el-input v-model="form.datingSampleCount" placeholder="请输入获得测试结果样品数" clearable maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="是否火山锥观测点" prop="isVocanicCone">
            <dict-select code="TrueOrFalse" :value="form.isVocanicCone" @update="updateDict('isVocanicCone', $event)"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="是否熔岩流观测点" prop="isLava">
            <dict-select code="TrueOrFalse" :value="form.isLava" @update="updateDict('isLava', $event)"></dict-select>
          </el-form-item>
          <el-form-item label="是否火山口观测点" prop="isCrater">
            <dict-select code="TrueOrFalse" :value="form.isCrater" @update="updateDict('isCrater', $event)"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="典型照片文件编号" prop="photoAiid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoAiid" placeholder="请输入典型照片文件编号" clearable maxlength="20"></el-input>
              <ImageUpload v-model="form.photoAiidName" @uploadImage="uploadSuccess('photoAiid', $event)" @delFile="deleteFile('photoAiid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="典型照片原始文件编号" prop="photoArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoArwid" placeholder="请输入典型照片原始文件编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.photoArwidName" @uploadFile="uploadSuccess('photoArwid', $event)" @delFile="deleteFile('photoArwid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="照片集镜向及拍摄者说明文档" prop="photoDescArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.photoDescArwid" placeholder="请输入照片集镜向及拍摄者说明文档" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.photoDescArwidName" @uploadFile="uploadSuccess('photoDescArwid', $event)" @delFile="deleteFile('photoDescArwid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="拍摄者" prop="photographer">
            <el-input v-model="form.photographer" placeholder="请输入拍摄者" clearable maxlength="20"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="典型剖面图文件名图表编号" prop="typicalProfileAcid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.typicalProfileAcid" placeholder="请输入典型剖面图文件名图表编号" clearable
                maxlength="20"></el-input>
              <ImageUpload v-model="form.typicalProfileAcidName" @uploadImage="uploadSuccess('typicalProfileAcid', $event)" @delFile="deleteFile('typicalProfileAcid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="典型剖面图文件原始编号" prop="typicalProfileArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.typicalProfileArwid" placeholder="请输入典型剖面图文件原始编号" clearable
                maxlength="20"></el-input>
              <FileUpload v-model="form.typicalProfileArwidName" @uploadFile="uploadSuccess('typicalProfileArwid', $event)" @delFile="deleteFile('typicalProfileArwid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="是否在图中显示" prop="isInMap">
            <dict-select code="TrueOrFalse" :value="form.isInMap" @update="updateDict('isInMap', $event)"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useSpatialData from '@/hooks/useSpatialData'
import { eightDouble, fourInt } from '@/utils/validate'
import { getDict } from '@/api/system/dict'
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, updateDict, isShowSave } = useSpatialData()
const formRules = {
  id: [{ required: true, message: '请填写编号！', trigger: 'blur' }],
  fieldId: [{ required: true, message: '请填写观测点野外编号！', trigger: 'blur' }],
  lon: [eightDouble],
  lat: [eightDouble],
  elevation: [fourInt],
  collectedSampleCount: [fourInt],
  sampleCount: [fourInt],
  datingSampleCount: [fourInt]
}
// const photoViewingToOptions = ref([])
// const getDictOptions = () => {
//   getDict('CVD-16-Direction').then(res => {
//     photoViewingToOptions.value = res.data
//   })
// }

// onMounted(() => {
//   getDictOptions()
// })
</script>
<style scoped></style>